<template>
    <div class="indexbox">
        <div class="toptop">
            <div class="indextop">
                <div class="inleft">
                    <img src="../other/logo.png" alt="">
                </div>
                <div class="infrom">
                    <input type="text" placeholder="搜索热门书籍" @click="sousuo">
                    <div class="insvg">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-sousuo"></use>
                        </svg>
                    </div>
                </div>
                <div class="min">心弦文学城</div>
            </div>
        </div>
        <lbt></lbt>
        <div v-show='!jz'>
            <div class="tj">
                <h2><span>编辑推荐</span></h2>
                <div class="tjbox" @click="tiaozhuan(bj.p_id,bj.title)">
                    <div class="tjleft">
                        <img :src="bj.cover" alt="">
                    </div>
                    <div class="tjright">
                        <p class="tjtitle">{{bj.title}}</p>
                        <p class="tjpeople">{{bj.author}}</p>
                        <p class="tjjj">{{bj.description}}</p>
                    </div>
                </div>
                <div class="tjdown">
                    编辑评语：{{bj.readInfo}}
                </div>
            </div>
            <div class="jp">
                <h2><span>精品必读</span><span>查看更多&nbsp;&nbsp; ></span></h2>
                <ul class="jpbd">
                    <li v-for="item in jparr" :key="item.id" @click="tiaozhuan(item.id,item.title)">
                        <div class="jpleft">
                            <img :src="item.cover" alt="">
                        </div>
                        <div class="jpright">
                            <div class="jptitle">{{item.title}}</div>
                            <div class="jppeople">{{item.author}}</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <loading v-show="jz" class="jia"></loading>
    </div>
</template>
<script>
import lbt from "../small/mylbt.vue"
import loading from "../small/loading.vue"
export default {
    name:"index",
    components:{
        lbt,
        loading
    },
    mounted(){
        this.getdata()
        this.$store.commit('changenavshow', true)
    },
    data(){
        return {
            jparr:[],
            bj:{},
            jz:true,
        }
    },
    methods:{
        getdata(){
            axios.get("https://apis.netstart.cn/yunyuedu/shelf/info.json").then(
                res=>{
                    // console.log(res)
                    this.jparr = res.data.data.list

                    axios.get("https://apis.netstart.cn/yunyuedu/shelf/banner.json").then(
                        res=>{
                            // console.log(res)
                            this.bj = res.data.data.banners[0]
                            this.jz = false
                        },
                        err=>{
                            console.log(err)
                        }
                    )
                },
                err=>{
                    console.log(err)
                }
            )
        },
        tiaozhuan(id,title){
            this.$store.commit("book/changenowbookid",id)
            this.$store.commit("book/changenowbooktitle",title)
            this.$router.push("/book")
        },
        sousuo(){
            this.$router.push("/search")
        }
    }
}
</script>
<style lang="less">
@import '../other/all.less';
.indexbox{
    width: 100%;
    overflow-x: hidden;
  &::-webkit-scrollbar { width: 0 !important }
    .toptop{
        width: 100%;
        background-color: white;
        z-index:1001;
        position: fixed;
        top:0px;
        height:55px;
        border-bottom: 1px solid @allcolor3;
    }
    .indextop{
        width: 85%;
        // margin:0px auto;
        background-color: #fff;
        margin-left:7.5%;
        height:50px;
        display: flex;
        justify-content: space-between;
        .min{
            font-size:15px;
            margin-top:22px;
            color:@allcolor2;
            font-family: '楷体';
        }
        .inleft{
            width:40px;
            height:40px;
            font-size:0px;
            margin-top:7px;
            // margin-right:10px;
            // margin-left:10px;
            border-radius: 50%;
            overflow: hidden;
            // border:1px solid @allcolor2;
            img{
                width:100%;
            }
        }
        .infrom{
            width: 60%;
            position: relative;
            // margin-right:10px;
            input{
                width: 80%;
                outline-color: transparent;
                border:1px solid @allcolor2;
                border-radius: 15px;
                display:inline-block;
                height:25px;
                padding-left:0.7rem;
                margin-top:15px;
                &::placeholder{
                    color:@allcolor1;
                }
            }
            .insvg{
                position: absolute;
                top:60%;
                transform: translateY(-50%);
                left:10px;
                font-size: 0.5rem;
                color:@allcolor2;
            }
        }
    }
}
h2{
    margin: 20px 0px;
    text-align: left;
    font-size:0.6rem;
    display:flex;
    justify-content: space-between;
    span{
        color:@allcolor2;
        &:nth-child(2){
            font-size: 0.35rem;
            color:@allcolor1;
            margin-top:7px;
        }
    }
}
.jp{
    width: 85%;
    margin:0 auto;
    .jpbd{
        width: 100%;
        padding-bottom: 60px;
        li{
            width: 100%;
            display:flex;
            margin-bottom: 10px;
            .jpleft{
                width: 20%;
                margin-right:10px;
                img{
                    width: 100%;
                }
            }
            .jpright{
                font-size: 0.4rem;
                text-align: left;
                .jptitle{
                    font-size: 0.5rem;
                    color:@allcolor2;
                    margin-top:10px;
                }
                .jppeople{
                    margin-top:5px;
                    color:@allcolor1;
                }
            }
        }
    }
}
.tj{
    width: 85%;
    margin:0 auto;
    .tjbox{
        display:flex;
        font-size:0.45rem;
        justify-content: space-between;
        text-align: left;
        .tjleft{
            width: 30%;
            img{
                width: 100%;
            }
        }
        .tjright{
            width: 67%;
            p{
                margin: 0;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
            .tjtitle{
                color:@allcolor2;
                font-weight: 550;
                margin-top:10px;
            }
            .tjpeople{
                margin-top:10px;
                font-size: 0.4rem;
                color:@allcolor1;
            }
            .tjjj{
                margin-top:10px;
                font-size:0.35rem;
            }
        }
    }
    .tjdown{
        font-size: 0.45rem;
        color:@allcolor5;
        border-bottom: 1px dashed @allcolor5;
        text-align: left;
        padding: 10px 0px ;
    }
}
.jia{
    height:300px !important;
    width: 100%;
}
</style>